<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import IScroll from 'iscroll/build/iscroll-probe'

export default {
  name: "ScrollView",
  mounted() {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      mouseWheel: true,
      scrollbars: false,  // 是否显示滚动条
      probeType: 3,   //类型监听
      //解决拖拽卡顿问题
      scrollX: false,
      scrollY: true,
      disablePointer: true,
      disableTouch: false,
      disableMouse: true,
      //解决移动端下的不能点击问题
      click: true,
      tap: true
    })
    //重新加载 iscroll
    // setTimeout(() => {
    //   this.iscroll.refresh();
    // }, 3000)

    //使用观察者对象进行监听元素发生变化并且重新加载iscroll
    //1. 创建观察者对象
    let observer = new MutationObserver((mutationList, observer) => {
      this.iscroll.refresh();
    })
    //2. 需要观察的内容
    let config = {
      childList: true,  //观察目标子节点的变化 , 添加或者删除
      subtree: true,     //观察后代节点的变化
      attributeFilter: ['height', 'offsetHeight'] //观察特定属性
    }
    //3. 需要观察的元素和内容
    /*
    第一个参数 : 需要观察的元素
    第二个参数 : 需要观察的内容
    */
    observer.observe(this.$refs.wrapper, config)
  },
  methods: {
    //提供一个监听滚动距离的方法给外界使用
    scrolling(fn) {
      this.iscroll.on('scroll', function () {
        fn(this.y)
      })
    },
    //刷新 iscroll
    refresh(time = 100) {
      setTimeout(() => {
        this.iscroll.refresh()
      }, time)
    },
    //暴露滚动方法
    scrollTo(x, y, time) {
      this.iscroll.scrollTo(x, y, time)
    }
  }
}
</script>

<style scoped lang="scss">
#wrapper {
  width: 100%;
  height: 100%;
}
</style>
